import React, { Component } from 'react'


class Bpp extends Component {
    render() {
        return (
            <div>
                {/* <h1>你好世界 {this.state.sadasdasdafs}</h1> */}
            </div>
        );
    }

    // ------------------------组件卸载-------------------------------

    // componentWillUnmount() {
    //     console.log('Bpp组件被卸载了');
    // }
}




export default class App extends Component {

    // ----------------------挂载阶段-----------------------------------
    constructor(props) {
        super(props)
        this.state = {
            count: 100
        }
    }



    // 初始阶段挂载时调用,更新时也会被调用
    // 因为挂载和更新有专门的方法,所以该方法不常用
    // static getDerivedStateFromProps(props, state) {
    //     console.log(props, state);

    //     //返回值是修改 state 数据的
    //     return {
    //         count: state.count + 1
    //     }
    // }



    //******************render 会在挂载时调用,在更新时也会被调用
    render() {
        console.log('render 被调用了');
        return (
            <div>
                App----{this.props.title}---{this.state.count}
                <button onClick={() => {
                    this.setState({
                        count: this.state.count + 1
                    })
                }}>点击修改 count</button>

                {this.state.count === 100 && <Bpp></Bpp>}
            </div>
        )
    }


    // ******************************初始阶段会调用该方法
    componentDidMount() {
        // 一般情况下可以在这里进行数据请求 
        console.log('组件挂载:componentDidMount');
    }


    // ----------------------挂载阶段------------------------------------------

    // ----------------------更新阶段-----------------------------


    // ----------------------更新阶段-----------------------------
    //更新时调用,用来提升 react 性能的方法,指明在特定的情况下才会重新渲染
    //在不是必须的情况下可以返回false 不再渲染
    // 该方法使用频率较低
    shouldComponentUpdate(nextProps, nextState) {
        console.log(nextProps, nextState);

        if (nextState.count === 105) {
            //返回false 时候将不会执行 render 函数重新渲染了
            return false
        } else {
            //返回 true 就会执行 render 渲染最新数据
            return true
        }
    }

    //在最近一次渲染输出 (提交到DOM节点) 之前被调用
    getSnapshotBeforeUpdate(prevProps, prevState) {
        //可以获取到更新之前的值
        console.log(prevProps, prevState);

        // 这里的返回值是被作为 componentDidUpdate 的第三个参数使用
        return '你好中国'
    }

    // *****************组件更新调用
    componentDidUpdate(prevProps, preState, snapshot) {
        console.log('更新:componentDidUpdate', prevProps, preState, snapshot);
    }


    //用来捕获后代组件错误信息的函数,这个不是生命周期函数
    // componentDidCatch(error,info){
    //     console.log('111111111111111111',error,'------------------------',info);
    // }

}



